<template>
  <view>
    <up-popup round="16" :show="modelValue" :closeOnClickOverlay="true" @close="close" mode="bottom" @open="open">
      <view class="coupon-box">
        <view class="flex-center-end">
          <view class="title">
            店铺优惠券
          </view>
          <view @tap="close">
            <image src="http://www.xvopen.com/xiaoV/img1/close.png" mode=""></image>
          </view>
        </view>
        <view class="sub-title">
          优惠详情
        </view>
        <scroll-view class="scroll-y-coupon" scroll-y="true" >
          <view class="coupon-item" v-for="(item,index) in couponList" :key="item.id">
            <view class="tips">
              {{item.couponType==='COUPON'?'折扣卷':'代金卷'}}
            </view>
            <view class="flex-a-center">
              <view class="num">
                <!--              这个地方存在折扣-->

                <template v-if="item.couponType==='COUPON'">
                  <text>{{ item.discountRate }}</text>折
                </template>
                <template v-else>
                  ￥<text>{{ item.discountAmount }}</text>
                </template>


              </view>
              <view class="desc-box">
                <view class="desc">
                  订单满{{ item.minOrderAmount }}元可使用
                </view>
                <text>{{ item.startDate }}-{{ item.endDate }}</text>
              </view>

              <view class="ment" v-if="!userCoupon">
                <text class="red" v-if="item.receiveCount<item.perUserLimit"  @click="handleGetCoupon(item)">领取</text>
                <text class="gray" v-else>已领取</text>
                <!--                <text class="gray" v-if="item.status === 3">已失效</text>-->
                <!--                <text class="gray" v-if="item.status === 0">未达门槛</text>-->
              </view>
              <view v-else class="ment_a">
                <image @click.stop="handleGetCouponChoose(item,index)"  style="width: 32rpx !important;height: 32rpx" v-if="!item.flag" src="@/static/icon/icon_round_no.png"></image>
                <image @click.stop="handleGetCouponChoose(item,index)" style="width: 32rpx !important;height: 32rpx" v-else src="@/static/icon/icon_round_active.png"></image>
              </view>


            </view>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  userCoupon:{
    type: Boolean,
    default: false,
  },

  couponList:{
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['update:modelValue', 'get-coupon']);
const  show = ref(false)
const close =()=>{
  emit('update:modelValue', false);
}
const handleGetCoupon = (item) => {
  console.log('item',item)
  // if(item.userStatus ===0){
  //
  // }
  emit('get-coupon', {item});

};
const handleGetCouponChoose =(item,index)=>{
  emit('get-coupon', {item,index});
}
</script>

<style lang="scss">
.name-all,.brief-all,.on-line,.tell,.shop-call,.coupon-box,.comment-mask-box{
  width: 686rpx;
  padding: 20rpx 24rpx;
  background-color: #fff;
  z-index: 100;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #000;
  .cont{
    width: 470rpx;
  }
  image{
    width: 28rpx;
    height: 28rpx;
    margin: 16rpx;
  }
}
.name-all{
  margin-top: 470rpx;
}
.brief-all{
  margin-top: 456rpx;
  min-height: 215rpx;
}
.on-line{
  color: #0080FF;
  margin-bottom: 24rpx;
}
.tell{
  color: #EB4C4C;
  margin-bottom: 48rpx;
}
.shop-call{
  width: 542rpx;
  padding: 0;
  .content{
    color: #444;
    margin: 24rpx 0 46rpx;
    view{
      margin-top: 10rpx;
    }
  }
  .call{
    height: 93rpx;
    color: #0080FF;
    font-weight: bold;
    border-top: 1rpx solid rgba(229, 229, 229, 0.6);
  }
}
.coupon-box,.comment-mask-box{
  width: 750rpx;
  border-radius: 32rpx 32rpx 0 0;
  color: #222;
  image{
    margin: 0 8rpx 0 235rpx;
  }
  .title{
    font-weight: bold;
  }
}
.coupon-box{
  height: 882rpx;
  padding: 32rpx 24rpx 164rpx;
  .sub-title{
    font-size: 28rpx;
    color: #000;
    margin-top: 40rpx;
    margin-bottom: 24rpx;
    font-weight: bold;
  }
  .coupon-item{
    width: 702rpx;
    height: 163rpx;
    border-radius: 16rpx;
    background-color: #FFF9F2;
    background-image: linear-gradient(90deg, #FFF9F2 0%, #FFF4EF 100%);
    margin-bottom: 24rpx;
    padding: 20rpx 0;
    position: relative;
    .tips{
      width: 134rpx;
      height: 38rpx;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 16rpx 0 20rpx 0;
      background-color: #FBE3E1;
      font-size: 22rpx;
      color: #D22C14;
      padding: 4rpx 12rpx;
      text-align: center;
    }
    .num{
      font-size: 28rpx;
      font-weight: bold;
      color: #D22C14;
      margin-left: 32rpx;
      min-width: 112rpx;
      margin-right: 48rpx;
      text{
        font-size: 60rpx;
      }
    }
    .desc-box{
      font-size: 28rpx;
      color: #000;
      width: 353rpx;
      height: 122rpx;
      border-right: 1rpx dashed #8F8F8F;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      text{
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
    .ment{
      width: 176rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      .gray {
        color: #8F8F8F;
      }
      .red {
        color: #D22C14;
      }
      >image{
        width: 32rpx;
        height: 32rpx;
      }
    }

    .round_img{
      width: 176rpx;
      >image{
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
.comment-mask-box{
  height: 80%;
  padding: 32rpx 16rpx 164rpx 32rpx;
  .head-vessel{
    padding: 40rpx 16rpx 32rpx 0;
    border-bottom: 1rpx solid rgba(229, 229, 229, 0.6);
    view{
      padding: 8rpx 16rpx;
      border-radius: 4rpx;
      color: #5B5B5B;
      background-color: #CCE6FF;
      margin-right: 20rpx;
    }
    .active{
      background-color: #0080FF;
      color: #fff;
    }
  }
  .comment-mask-item{
    padding-bottom: 16rpx;
    .top{
      font-size: 28rpx;
      margin: 24rpx 0 8rpx;
      padding-right: 16rpx;
      image{
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background-color: #ddd;
        margin: 0 16rpx 0 0;
      }
    }
    .mid{
      font-size: 28rpx;
      color: #999;
      margin-bottom: 12rpx;
      padding-right: 16rpx;
      .type{
        width: 520rpx;
      }
    }
    .bottom{
      .desc{
        margin-bottom: 16rpx;
        padding-right: 16rpx;
      }
      image{
        width: 218rpx;
        height: 218rpx;
        border-radius: 8rpx;
        background-color: #eee;
        margin: 0 16rpx 16rpx 0;
      }
    }
  }
}
.scroll-y{
  height: 88%;
}
.scroll-y-coupon{
  height: 80%;
}
.wash-bottom{
  bottom: 0;
  padding-bottom: 116rpx;
  min-height: 546rpx;
}
.ment_a{
  position: absolute;
  bottom: 50%;
  right: 20rpx ;
  transform: translateY(50%);

  //width: 60rpx;
  //he
  display: flex;
  justify-content: center;
}
</style>
